<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Shoppe商城-综合网购首选-正品低价、品质保证、配送及时、轻松购物
    </title>
    <link rel="icon" href="./static/img/common/favicon.ico" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="./css/cart.css" />
    <style>      
      .account {
        display: block;
        width: 250px;
        height: 50px;
        margin-left: 20px;
        float: right;
        text-align: center;
        font-size: 18px;
        line-height: 50px;
        background: #ff6700;
        color: #fff;
        cursor: pointer;
      }
      .account:hover {
        background-color: #f25807;
      }
      
    </style>
    <script src="jquery/jquery-3.6.0.js"></script>
    <script>
      $(function () {
        //修改商品项数目时小于等于1无效
        $("#reduce").click(function () {
          return false;
        });
      });
    </script>
  </head>
  <body>
  <!-- 顶部模块start -->
  <%@include file="/page/common/top.jsp"%>
  <!-- 顶部模块end -->
  <!-- nav 搜索模块start -->
  <%@include file="page/common/search.jsp"%>
  <!-- nav 搜索模块end -->
    <!-- 标题 start -->
    <div class="title">
        <div class="w iconfont">
          <em class="em1">&#xe735;</em><em class="em2">我的购物车</em>
        </div>
      </div>
      <div class="w">
          <div class="my-cart">
            <div id="app">
              <div v-if="books.length">
                <c:if test="${not empty sessionScope.cart&&sessionScope.cart.totalCount!=0}">
                  <table>
                    <thead>
                    <tr>
                      <th></th>
                      <th>商品名称</th>
                      <th>价格</th>
                      <th>购买数量</th>
                      <th>小计</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <c:forEach var="entry" items="${sessionScope.cart.items}">
                      <tbody>
                      <tr v-for="(item,index) in books">
                        <td><img class="good-img" src="${entry.value.imgPath}"></td>
                        <td>${entry.value.name}</td>
                        <td>${entry.value.price}</td>
                        <td>
                          <c:if test="${entry.value.count>1}">
                            <a  href="cartServlet?action=updateCount&count=reduce&id=${entry.value.id}" class="count"><img src="./static/img/cart/reduce.png" alt=""></a>
                          </c:if>
                          <c:if test="${entry.value.count<=1}">
                            <a id="reduce" href="cartServlet?action=updateCount&count=reduce&id=${entry.value.id}" class="count" ><img src="./static/img/cart/unreduced.png" alt=""></a>

                          </c:if>
                            ${entry.value.count}
                          <a href="cartServlet?action=updateCount&count=add&id=${entry.value.id}" class="count" @click="increment(index)"><img src="./static/img/cart/add.png" alt=""></a>
                        </td>
                        <td>${entry.value.totalPrice}</td>
                        <td>
                          <a href="cartServlet?action=deleteItem&id=${entry.value.id}" class="delete" >移除</a>
                        </td>
                      </tr>
                      </tbody>
                    </c:forEach>
                  </table>

            <div class="price">
              <h2 class="total-goods">共<em>${sessionScope.cart.totalCount}</em>件商品</h2>
              <a class="account" href="order.jsp">去结算</a>
              <h2 class="total-price">合计：${sessionScope.cart.totalPrice}</h2>        
            </div>
            <div class="del clearfix">
              <a href="cartServlet?action=clear">清空购物车</a>
            </div>
                </c:if>
          </div>
              <c:if test="${empty sessionScope.cart||sessionScope.cart.totalPrice==0}">
                <h2 class="empty clearfix" v-else>
                  <img src="./static/img/cart/cart-empty.png" alt="">
                  <p class="empty1">您的购物车还是空的!<br>
                    <em>快去购物吧！</em>
                  </p>
                </h2>
              </c:if>
          </div>
          </div>
      </div>
    <!-- 标题 end -->
  <!-- 页脚开始 -->
  <%@include file="page/common/bottom.jsp"%>
  <!-- 页脚结束 -->
    <script src="js/common.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/cart.js"></script>
  </body>
</html>